<!DOCTYPE html>
<html lang="en">

<head>
    <title>Delete User</title>
    <meta name="comp2800 template" content="Delete User">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- 新增图标库 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 保持原有样式不变，增加以下局部样式 */
        .form-outline {
            position: relative;
        }
        
        .form-outline .form-label {
            transition: all 0.2s ease-out;
        }
        
        .form-outline input:focus + .form-label,
        .form-outline input:not(:placeholder-shown) + .form-label {
            transform: translateY(-1.5rem) scale(0.85);
            background-color: white;
            padding: 0 0.25rem;
            margin-left: -0.25rem;
        }
        
        .btn-danger {
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(220, 53, 69, 0.25);
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .delete-icon {
            margin-right: 0.5rem;
            transition: transform 0.3s;
        }
        
        .btn-danger:hover .delete-icon {
            transform: rotate(15deg);
        }
        
        .status-message {
            margin-top: 1.5rem;
            padding: 0.75rem;
            border-radius: 0.25rem;
            transition: all 0.3s ease;
            opacity: 0;
            height: 0;
            overflow: hidden;
        }
        
        .status-message.active {
            opacity: 1;
            height: auto;
        }
        
        .status-message.success {
            background-color: #d4edda;
            color: #155724;
        }
        
        .status-message.error {
            background-color: #f8d7da;
            color: #721c24;
        }
    </style>
</head>

<body>
    <!-- 导航栏优化 -->
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: lightskyblue; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
        <div class="container-fluid">
            <a class="navbar-brand d-flex align-items-center" href="#">
                <img src="../images/biaoti.png" height="36" alt="Health Bot Logo">
                <span class="ms-2" style="font-weight: 600;">Health Bot</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" href="../aboutus.html">About Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="../main.html">Health</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="../history.html">History</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="../delete_user.html">Delete</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="../profile.html">Profile</a>
                    </li>
                </ul>
                <div class="d-flex">
                    <a class="btn btn-outline-success" href="../login.html">
                        <i class="fa fa-sign-out mr-1"></i> Logout
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主体内容优化 -->
    <section class="vh-100" style="background-color: lightgrey;">
        <div class="mask d-flex align-items-center h-100 gradient-custom-3">
            <div class="container h-100">
                <div class="row d-flex justify-content-center align-items-center h-100">
                    <div class="col-12 col-md-9 col-lg-7 col-xl-6 fade-in">
                        <div class="card" style="border-radius: 15px;">
                            <div class="card-body p-5">
                                <div class="text-center mb-5">
                                    <h2 class="mb-2">Delete User</h2>
                                    <p class="text-muted">Permanently remove a user account</p>
                                </div>
                                <form>
                                    <div data-mdb-input-init class="form-outline mb-4">
                                        <input type="email" id="deleteEmail" class="form-control form-control-lg" placeholder=" ">
                                        <label class="form-label" for="deleteEmail">Email of User to Delete</label>
                                        <div class="form-icon">
                                            <i class="fa fa-envelope-o text-muted" style="position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);"></i>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-center">
                                        <button type="button" 
                                            class="btn btn-danger btn-block btn-lg" 
                                            onclick="deleteUser()">
                                            <i class="fa fa-trash delete-icon"></i> Delete User
                                        </button>
                                    </div>
                                    
                                    <!-- 状态提示区域 -->
                                    <div id="statusMessage" class="status-message text-center"></div>
                                </form>
                                
                                <!-- 安全提示 -->
                                <div class="mt-5 pt-4 border-top">
                                    <div class="alert alert-warning" role="alert">
                                        <h4 class="alert-heading"><i class="fa fa-exclamation-triangle mr-2"></i> Important Note</h4>
                                        <p>Deleting a user is irreversible. All associated data will be permanently removed.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-3 text-center">
        <div class="container">
            <p>&copy; 2025 Health Bot. All rights reserved.</p>
            <div class="mt-2">
                <a href="#" class="text-white mx-2"><i class="fa fa-facebook"></i></a>
                <a href="#" class="text-white mx-2"><i class="fa fa-twitter"></i></a>
                <a href="#" class="text-white mx-2"><i class="fa fa-instagram"></i></a>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script src="./scripts/skeleton.js"></script>
    <script src="./scripts/delete_user.js"></script>
    <script src="./scripts/script.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 输入框标签动画
            const inputs = document.querySelectorAll('input');
            inputs.forEach(input => {
                if (input.value.trim() !== '') {
                    input.parentElement.querySelector('.form-label').classList.add('active');
                }
            });
            
            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    e.preventDefault();
                    const target = document.querySelector(this.getAttribute('href'));
                    if (target) {
                        target.scrollIntoView({
                            behavior: 'smooth'
                        });
                    }
                });
            });
        });
        
        // 状态消息显示函数
        function showStatusMessage(message, isError = false) {
            const statusElement = document.getElementById('statusMessage');
            statusElement.textContent = message;
            statusElement.classList.add('active');
            
            if (isError) {
                statusElement.classList.add('error');
                statusElement.classList.remove('success');
            } else {
                statusElement.classList.add('success');
                statusElement.classList.remove('error');
            }
            
            // 3秒后自动隐藏消息
            setTimeout(() => {
                statusElement.classList.remove('active');
            }, 5000);
        }
        
        // 删除用户函数（示例实现）
        function deleteUser() {
            const email = document.getElementById('deleteEmail').value;
            
            if (!email) {
                showStatusMessage('Please enter an email address', true);
                return;
            }
            
            // 模拟删除操作
            showStatusMessage(`Deleting user: ${email}...`);
            
            // 这里应该是实际的API调用
            setTimeout(() => {
                showStatusMessage('User deleted successfully');
                document.getElementById('deleteEmail').value = '';
            }, 1500);
        }
    </script>
</body>

</html>